<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My Portfolio</title>
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1"
      crossorigin="anonymous"
    />
    <link rel="stylesheet" href="../assets/css/Portfolio/styles.css" />
    <link rel="preconnect" href="https://fonts.gstatic.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" />
    <link
      href="https://fonts.googleapis.com/css2?family=Balsamiq+Sans&display=swap"
      rel="stylesheet"
    />
    <link rel="icon" href="img/logo.png" />
  </head>
  <script
    src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js"
    integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW"
    crossorigin="anonymous"
  ></script>
  <body>
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
      <div class="container">
        <a class="navbar-brand" href="#">Portfolio</a>
        <button
          class="navbar-toggler"
          type="button"
          data-bs-toggle="collapse"
          data-bs-target="#navbarNav"
          aria-controls="navbarNav"
          aria-expanded="false"
          aria-label="Toggle navigation"
        >
          <span class="navbar-toggler-icon"></span>
        </button>
        <div
          class="collapse navbar-collapse justify-content-end"
          id="navbarNav"
        >
          <ul class="navbar-nav">
            <li class="nav-item">
              <a class="nav-link" href="#Home">Home</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#About Me">About Me</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#Skills">Skills</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#Projects">Projects</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#Contact">Contact</a>
            </li>
          </ul>
        </div>
      </div>
    </nav>

    <header class="page-header gradient">
      <div class="container pt-3">
        <div class="row align align-items-center">
          <div class="col-md-6">
            <br />
            <h2>Hey Guys, Welcome to Portfolio Website</h2>

            <h5>
              I'm currently an undergrad B.Tech Computer Science (CSE) student
              <br />
              I am a keen learner and take interest in coding and learning new
              skills.
            </h5>
            <br />
          </div>
          <div class="col-md-6">
            <img
              class="header-img mx-auto d-block"
              src="../assets/Images/Portfolio/Portfolio-update.jpg"
              alt="My Header Img"
            />
          </div>
        </div>
      </div>
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
        <path
          fill="#fff"
          fill-opacity="1"
          d="M0,224L48,197.3C96,171,192,117,288,117.3C384,117,480,171,576,186.7C672,203,768,181,864,149.3C960,117,1056,75,1152,90.7C1248,107,1344,181,1392,218.7L1440,256L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"
        ></path>
      </svg>
    </header>
    <section class="About">
      <div class="container text-center">
        <div class="col-md-12">
          <h2 id="About Me" class="skills">About Me</h2>
          <div class="row">
            <div class="col-md-6 align-items-center">
              <img class="about-img" src="../assets/Images/Portfolio/20943391.jpg" alt="about-img" />
            </div>
            <div class="col-md-6">
              <p class="para" style="text-align: center">
                I'm Atif Coming From The Lands Of Ganges . I'm In 4th Sem Of
                B.Tech In Computer Science Department. I'm a Front Web Developer
                And Still in A Process Of Becoming A Full Stack Web Developer. I
                Also Know Some Langauges Like C,C++,Html,CSS And Bootstrap.
              </p>
            </div>
          </div>
        </div>
      </div>
    </section>
    <section class="skills">
      <div class="container align-items-center">
        <h2 id="Skills" class="skills">Skills</h2>
        <div class="row g-5">
          <div class="col-md-6">
            <div class="card align-content-center" style="width: 18rem">
              <img
                src="../assets/Images/Portfolio/c.png"
                class="card-img-top mx-auto d-block"
                alt="c-img"
              />
              <div class="card-body">
                <p class="card-text">
                  C language is a system programming language because it can be
                  used to do low-level programming.
                </p>
              </div>
            </div>
          </div>
          <div class="col-md-6">
            <div class="card" style="width: 18rem">
              <img
                src="../assets/Images/Portfolio/c++.png"
                class="card-img-top mx-auto d-block"
                alt="c++-img"
              />
              <div class="card-body">
                <p class="card-text">
                  C++ is a cross-platform language that can be used to create
                  high-performance applications.
                </p>
              </div>
            </div>
          </div>
          <div class="col-md-6">
            <div class="card" style="width: 18rem">
              <img
                src="../assets/Images/Portfolio/html.png"
                class="card-img-top mx-auto d-block"
                alt="html-img"
              />
              <div class="card-body">
                <p class="card-text">
                  HTML is the standard markup language for Web pages.
                </p>
              </div>
            </div>
          </div>
          <div class="col-md-6">
            <div class="card" style="width: 18rem">
              <img
                src="../assets/Images/Portfolio/Css (1).png"
                class="card-img-top mx-auto d-block"
                alt="css-img"
              />
              <div class="card-body">
                <p class="card-text">
                  CSS is the language for describing the presentation of Web
                  pages, including colors, layout, and fonts.
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
    <section class="projects gradient align-items-center">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
        <path
          fill="#fff"
          fill-opacity="1"
          d="M0,192L48,202.7C96,213,192,235,288,208C384,181,480,107,576,85.3C672,64,768,96,864,138.7C960,181,1056,235,1152,245.3C1248,256,1344,224,1392,208L1440,192L1440,0L1392,0C1344,0,1248,0,1152,0C1056,0,960,0,864,0C768,0,672,0,576,0C480,0,384,0,288,0C192,0,96,0,48,0L0,0Z"
        ></path>
      </svg>
      <div class="container">
        <h2 id="Projects" class="skills">Projects</h2>
        <div class="row g-5">
          <div class="col-md-6">
            <div class="card" style="width: 18rem">
              <img
                src="../assets/Images/Portfolio/dg clock.png"
                class="card-img-top mx-auto d-block"
                alt="clock-img"
              />
              <div class="card-body">
                <p class="card-text">
                  Digital Clock<br />I have made a Digital Clock for myself.
                </p>
              </div>
            </div>
          </div>
          <div class="col-md-6">
            <div class="card" style="width: 18rem">
              <img
                src="../assets/Images/Portfolio/Portfoli img.png"
                class="card-img-top mx-auto d-block"
                alt="port-img"
              />
              <div class="card-body">
                <p class="card-text">
                  Portfolio<br />I have made a Portfolio for myself
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
        <path
          fill="#fff"
          fill-opacity="1"
          d="M0,192L48,202.7C96,213,192,235,288,208C384,181,480,107,576,85.3C672,64,768,96,864,138.7C960,181,1056,235,1152,245.3C1248,256,1344,224,1392,208L1440,192L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"
        ></path>
      </svg>
    </section>
    <section class="contact">
      <div class="container justify-content-between">
        <div class="row">
          <div class="col-md-5">
            <form action="index.php" method="POST">
              <h2 id="Contact">Contact Me</h2>
              <div class="form-floating mb-3">
                <input
                  type="text"
                  class="form-control"
                  id="floatingInput"
                  placeholder="Alexa"
                  name="name"
                />
                <label for="floatingInput">Name</label>
              </div>
              <div class="form-floating mb-3">
                <input
                  type="email"
                  class="form-control"
                  id="floatingInput"
                  placeholder="name@example.com"
                  name="email"
                />
                <label for="floatingInput">Email address</label>
              </div>
              <div class="form-floating">
                <textarea
                  class="form-control"
                  placeholder="Leave a comment here"
                  id="floatingTextarea2"
                  style="height: 100px"
                  name="message"
                ></textarea>
                <label for="floatingTextarea2">Message</label>
              </div>
              <button
                type="submit"
                class="btn btn-outline-info"
                name="submit"
                value="submit"
              >
                Submit
              </button>
            </form>
          </div>
          <div class="col-md-5">
            <img src="../assets/Images/Portfolio/handshake.svg" alt="contact-img" />
          </div>
        </div>
      </div>
    </section>
    <footer class="gradient">
      <div class="container-fluid text-center">
        <span> Made with <3 by Atif </span>
      </div>
    </footer>

    <!-- BootStrap Script -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
  </body>
</html>
